<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <jsp:include page="/WEB-INF/view/commons/css.jsp" />
</head>
<body class="container-fluid top-container">
<div class="page-content">

    <div class="row">
        <div class="col-md-3">

            <div class="widget-box">
                <div class="widget-header">
                    <h4><i class="icon-tint"></i>系统权限管理</h4>
                </div>
                <div class="widget-body">
                    <div class="widget-main">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-md-8">

            <div class="widget-box">
                <div class="widget-header">
                    <h5 class="widget-title"><i class="icon-edit"></i>权限编辑</h5>
                    <div class="widget-toolbar">
                        <a id="delete_menu_btn" href="javascript:void(0);" class="btn btn-xs btn-danger" ><i class="icon-trash"></i> 删除此权限</a>
                        <a id="add_menu_btn" href="javascript:void(0);" class="btn btn-xs btn-success" ><i class="icon-plus"></i> 新增权限</a>
                        <a id="imp_menu_btn" href="javascript:void(0);" class="btn btn-xs btn-pink"><i class="icon-upload"></i> 批量导入</a>
                        <a id="export_menu_btn" href="syspermission/export" class="btn btn-xs btn-pink"><i class="icon-share"></i> 导出</a>
                    </div>
                </div>

                <div class="widget-body">
                    <div class="widget-main">

                        <form  name="inputForm" id="inputForm" method="post" class="form-horizontal hide">
                            <input name="parentId" id="parentId" value="${entity.parentId}" type="hidden" />
                            <input name="subsysCode" id="subsysCode" value="${entity.subsysCode}" type="hidden" />
                            <input name="permissionLevel" id="permissionLevel" value="${entity.permissionLevel}" type="hidden" />
                            <div class="form-group">
                                <label for="id" class="col-sm-2 control-label">权限ID:</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="id" name="id" value="${entity.id}" placeholder="权限ID">
                                </div>
                                <label for="id" class="col-sm-2 control-label">权限编码:</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="permissionCode" name="permissionCode" value="${entity.permissionCode}" class="" placeholder="权限编码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="id" class="col-sm-2 control-label">权限名称:</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="permissionName" name="permissionName" value="${entity.permissionName}" placeholder="权限名称">
                                </div>
                                <label for="id" class="col-sm-2 control-label">连接地址:</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="action" name="action" value="${entity.action}"  placeholder="连接地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="id" class="col-sm-2 control-label">权限类型:</label>
                                <div class="col-md-4">
                                    <d:select id="permissionType" name="permissionType" list="${permissionTypeList }" require="true"/>
                                </div>
                                <label for="id" class="col-sm-2 control-label">排序号:</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="sortNum" name="sortNum" value="${entity.sortNum}" placeholder="排序号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="id" class="col-sm-2 control-label">图标:</label>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="icon" name="icon" value="${entity.icon}" class="" placeholder="图标">
                                        <span class="input-group-addon"><i id="icon_preview" class="${entity.icon}"></i></span>
                                    </div>
                                </div>
                                <label for="id" class="col-sm-2 control-label">使用状态:</label>
                                <div class="col-md-4">
                                    <d:select id="display" name="display" list="${dataStatusList }" require="true"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="id" class="col-sm-2 control-label">备注:</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="remark" name="remark" value="${entity.remark}" class="" placeholder="备注">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-md-2">
                                    <button id="saveBtn" type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> 提交</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- script start -->
<jsp:include page="/WEB-INF/view/commons/js.jsp" />
<link rel="stylesheet" href="static/plugin/ztree-3.5/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="static/plugin/ztree-3.5/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
    //当前选中的节点对象，通过click事件不断复写
    var currentNode;
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: 0
            }
        },
        callback:{
            onClick:function(event, treeId, treeNode){
                var id = treeNode.id;
                var parentId = treeNode.parentId;
                if(parentId == '00'){
                    currentNode = null;
                    $('#inputForm').addClass('hide');
                    return ;
                }
                currentNode = treeNode;
                $.ajax({
                    url: 'syspermission/info/' + id,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        if(data.success){
                            var entity = data.data;

                            $('#inputForm :text,select,input[type=hidden]').each(function(){
                                if(entity[this.name] != 'undefined'){
                                    this.value = entity[this.name];
                                }
                                if(this.name=='icon'){
                                    var fa_icon=entity[this.name];
                                    $('#icon_preview').removeClass().addClass(fa_icon);
                                }
                                $('#id').attr('readonly','readonly');
                            });

                            //角色
                            $('#ul_user_role :checkbox').attr('checked',false);
                            if(entity.roleMenuList){
                                $.each(entity.roleMenuList,function(i,item){
                                    var _role = $('#ul_user_role :checkbox[value='+item.roleId+']');
                                    if(_role && _role.length > 0){
                                        _role.get(0).checked=true;
                                    }
                                });
                            }
                            $('#inputForm').attr('action', 'syspermission/update').removeClass("hide");
                        }
                    }
                });
            }
        }

    };

    $(document).ready(function(e) {
        var options = {
            rules:{
                id:{required:true,maxlength:32},
                permissionName:{required:true,maxlength:256},
                permissionType:{required:true,maxlength:256},
                display:{required:true,digits:true},
                sortNum:{required:true,digits:true}
            },
            submitHandler:function(form){
                $(form).ajaxSubmit({
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        if(data){
                            layer.alert(data.msg);
                        }
                    }
                });
            }
        };
        $("#inputForm").validate(options);



        $('#delete_menu_btn').on('click', function(){
            layer.confirm("确定要删除该权限吗？其下子权限将一并删除！", function(index) {
                layer.close(index);
                var parent = currentNode.getParentNode();
                $.ajax({
                    url: 'syspermission/delete/'+currentNode.id,
                    type: "DELETE",
                    dataType: "json",
                    success: function (data) {
                        window.location.href="syspermission/list"
                    }
                });
            });// end confirm

        });//end delete

        $('#add_menu_btn').on('click', function(){
            var nodes = zTree.getSelectedNodes();
            if(nodes && nodes.length == 1){
                $('#inputForm input[type=text],input[type=hidden]').each(function(){
                    this.value = '';
                });
                $('#icon_preview').removeClass();
                $('#parentId').val(nodes[0].id);
                var node = nodes[0];
                var maxId = -1;
                if(node.isParent && node.children){
                    $.each(node.children, function(i, item){
                        if(item.id - maxId  > 0){
                            maxId = item.id;
                        }
                    });
                }
                var newId = maxId > 0 ? maxId*1+1 : node.id*100 + 11;
                $('#sortNum').val(newId);
                $('#id').val(newId);
                $('#permissionLevel').val(node.level + 1);
                $('#inputForm').attr('action', 'syspermission/save').removeClass("hide");
                $('#id').removeAttr('readonly'); 
            }else{
                layer.alert('请先选择一个父菜单');
            }
        });

        $.ajax({
            url: 'syspermission/queryPermissionTree',
            type: "get",
            dataType: "json",
            success: function (data) {
//            console.log(data);
                zNodes = data.data;
                $.each(zNodes, function(i, n){
                    if(n.level=='undefined' || n.level < 1){
                        n.open=true;
                    }
                });
                zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }
        });

        $('#imp_menu_btn').click(function(){
            openIframe({
                title:'批量导入系统权限',
                url:'syspermission/batchImportForm',
                width:'600px',
                height:'450px'
            });

        });

    });
</script>
<!-- script end -->

</body>
</html>

